<template>
	<view>
		<view class="topbar">
			<view class="dhl"></view>
			<view class="tab dis_f_c_c">
				<view style="width: 344rpx;position:relative;">
					<u-tabs item-width="55" bg-color="none" :active-item-style="tabstyle" :list="list" height="88"
						active-color="#222222" bar-width="40" bar-height="6" inactive-color="#fff" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
			</view>
		</view>
		<!-- <topbar title="邀请领收益" jt_c="2" background="background:#222222;color:#fff;"></topbar> -->
		<!-- <view class="tg_bz dis_f_l_c" >
			<image src="../../static/mine/tgbz.png" mode=""></image>
			<view class="dis_f_c_c" @click="go_wen">推广帮助</view>
		</view> -->
			
		<view class="content dis_f_co_c_c">
			<img src='../../static/mine/yaoqing.png' style=" height:100vh;width:100vw;">
		</view>
	
		<view class="content dis_f_co_c_c" >
			<img src='http://qiniu78a.htjy668.cn/1c51f34710d5075937229e3353469b4.png' style=" height: 100vh;width:100vw; ">
			<view class="qrcode-box" style="position: fixed;top: 30vh;left: 27.5vw;">
				<uqrcode ref="uqrcode" />
				</uqrcode>
			</view>

			<!-- <view class="hb_btn dis_f_c_c" style="margin-top: 40rpx;" @tap="save">点击保存海报</view> -->
			<!-- <image class="syb" src="../../static/mine/syb.png" mode=""></image> -->
			<!-- <view class="image-box">
				<image class="ewm" :src="qrcodeSrc" />
				<text class="text">image(400rpx)</text>
			</view> -->
			<!-- 	<input class="input" v-model="qrcodeText" placeholder="输入内容生成二维码" />
			<button class="button" type="primary" @tap="make">生成二维码</button>
			<button class="button" type="primary" >保存二维码</button> -->
			<!-- <view class="bang_dan">
				<view class="bd_box dis_f_sb_c">
					<view class="dis_f_c_c">排名</view>
					<view class="dis_f_c_c">用户ID</view>
					<view class="dis_f_c_c">收益(元)</view>
				</view>
				<view class="bd_box dis_f_sb_c" v-for="(item,index) in user">
					<view class="dis_f_c_c">{{index+1}}</view>
					<view class="dis_f_c_c">{{item.hide}}</view>
					<view class="dis_f_c_c" style="color: #E23C63;">{{item.moremoney}}</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'
	export default {

		data() {
			return {
				qrcodeSize: 160,
				qrcodeText: 'uQRCode 2.0.23 更新时间：2021-08-09',
				qrcodeSrc: '',
				qrcodeTextRandom: '',
				user: [],
				userinfo: [],


				list: [{
					name: '返回'
				},{
					name: '邀请'
				}, {
					name: '排线'
				}],
				current: 1,
				tabstyle: {
					'font-size': '34rpx'
				},
				search_text: '',
				sex_src: '',
				quan: [],
				part: true,
				userAddConversationList: [],
				uid: 0,
				page: 1,
				zys: '',
				status: 'loadmore',
				previewVideoSrc: '',
				info: [],
			};
		},
		onLoad() {
			this.$.ajax(1, 'post', 'index/getuserlist', {
				uid: uni.getStorageSync('uid'),
				token: uni.getStorageSync('token')
			}, (res) => {
				console.log(res)
				if (res.code == 1) {
					this.user = res.list
				} else if (res.code == 9) {
					this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return;
				}
			})

			// 在onReady中调用绘制二维码方法，尽量不要在onLoad中
		},
		onReady() {

			this.qrcodeText = 'http://jk85472adeg.htjy668.cn/index.html#/?code=' + uni.getStorageSync('salt') + '&team=0'
			this.make()
			this.makeCustom()
		},
		methods: {
			go_wen() {
				this.$.open('/pages/mine/wen?id=' + 1)
			},
			make() {
				uni.showLoading({
					mask: true,
					title: '生成中...'
				})
				this.$refs
					.uqrcode
					.make({
						size: this.qrcodeSize,
						text: this.qrcodeText,
						enableDelay: false // 启用延迟绘制
					})
					.then(res => {

						// 返回的res与uni.canvasToTempFilePath返回一致
						console.log(res)
						console.log(`生成二维码耗时：${res.time}ms`)
						uni.hideLoading()
						this.qrcodeSrc = res.tempFilePath
					})
				// .finally(() => {
				// 	uni.hideLoading()
				// })
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				}
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/mine/yq_lsy1'
					})
				}
			},
			save() {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: 'H5长按image保存'
				})
				return
				// #endif

				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeSrc,
					success: (res) => {
						// 
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						})
					}
				})
			},
			makeCustom() {
				// this.qrcodeTextRandom = this.uuid()

				// 得到矩阵，可根据返回的矩阵信息自行实现二维码生成，甚至是样式。以下为示例
				var modules = uQRCode.getModules({
					text: this.qrcodeTextRandom,
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				})
				// console.log('modules', modules)

				// 定义样式信息
				var size = this.qrcodeSize
				var margin = 10
				var tileW = (size - margin * 2) / modules.length
				var tileH = tileW
				var foregroundColor = '#39b54a'
				var backgroundColor = '#ffffff'

				// canvas实例
				var canvasId = 'customqrcode'
				var ctx = uni.createCanvasContext(canvasId)
				ctx.setFillStyle(backgroundColor)
				ctx.fillRect(0, 0, size, size)
				for (var row = 0; row < modules.length; row++) {
					for (var col = 0; col < modules.length; col++) {
						// 计算每一个小块的位置
						var x = col * tileW + margin
						var y = row * tileH + margin
						var w = tileW
						var h = tileH

						// 画圆，随机颜色
						var style = backgroundColor
						ctx.setFillStyle(style)
						ctx.beginPath()
						ctx.arc(x + 4, y + 4, w / 2, 0, 2 * Math.PI)
						ctx.fill()

						// 画方
						// var style = modules[row][col] ? foregroundColor : backgroundColor
						// ctx.setFillStyle(style)
						// ctx.fillRect(x, y, w, h)
					}
				}
				ctx.draw()
			},
			saveCustom() {
				uni.canvasToTempFilePath({
					canvasId: 'customqrcode',
					fileType: 'jpg',
					width: this.qrcodeSize,
					height: this.qrcodeSize,
					destWidth: this.qrcodeSize,
					destHeight: this.qrcodeSize,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									icon: 'success',
									title: '保存成功'
								})
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									title: JSON.stringify(err)
								})
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						})
					}
				}, this)
			},
		}
	}
</script>

<style lang="scss">
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}

	}

	.topbar {
		position: fixed;
		z-index: 9999;
		width: 100%;

		.dhl {
			height: var(--status-bar-height);
			background-color: #7ADEEC;
		}

		.tab {
			width: 100%;
			height: 88rpx;
			background-color: #7ADEEC;
		}

		.xfj {
			width: 33.79rpx;
			height: 31.74rpx;
			position: fixed;
			top: calc(var(--status-bar-height) + 24rpx);
			right: 48rpx;
		}

		.s_banxin {
			width: 100%;
			padding: 0 48rpx;
			background-color: #7ADEEC;
			height: 88rpx;

			.search {
				width: 100%;
				background-color: #fff;
				border-radius: 30rpx;
				padding: 14rpx 0 14rpx 30rpx;
				height: 60rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}

		}
	}

	.content {
		width: 100%;
		// padding: 0 24rpx 0 24rpx;
		// top: calc(var(--status-bar-height));
		z-index: 998;
		position: absolute;

		.ewm {
			width: 100%;
			height: 702rpx;
			margin-bottom: 24rpx;
		}

		.hb_btn {
			font-size: 22rpx;
			line-height: 32rpx;
			color: #E23C63;
			width: 100%;
			margin-bottom: 34rpx;
		}

		.syb {
			width: 222rpx;
			height: 94rpx;
			margin-bottom: 24rpx;
		}

		.bang_dan {
			width: 100%;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.bd_box {
				padding: 36rpx 48rpx;
				width: 100%;
				border-bottom: 2rpx solid #eee;

				view {
					width: 234rpx;
				}
			}
		}
	}
</style>
